<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Splitter</h1>
        <p>Splitter is utilized to separate and resize panels.</p>
    </div>
    <app-demoActions github="splitter" stackblitz="splitter-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Horizontal</h5>
        <p-splitter [style]="{'height': '300px'}" styleClass="mb-5">
            <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center">
                    Panel 1
                </div>
            </ng-template>
            <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center">
                    Panel 2
                </div>
            </ng-template>
        </p-splitter>
    </div>

    <div class="card">
        <h5>Vertical</h5>
        <p-splitter [style]="{'height': '300px'}" styleClass="mb-5" layout="vertical">
            <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center">
                    Panel 1
                </div>
            </ng-template>
            <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center">
                    Panel 2
                </div>
            </ng-template>
        </p-splitter>
    </div>

    <div class="card">
        <h5>Nested</h5>
        <p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
            <ng-template pTemplate>
                <div class="col flex align-items-center justify-content-center">
                    Panel 1
                </div>
            </ng-template>
            <ng-template pTemplate>
                <p-splitter layout="vertical" [panelSizes]="[15,85]">
                    <ng-template pTemplate>
                        <div class="col flex align-items-center justify-content-center">
                            Panel 2
                        </div>
                    </ng-template>
                    <ng-template pTemplate>
                        <p-splitter [panelSizes]="[20,80]">
                            <ng-template pTemplate>
                                <div class="col flex align-items-center justify-content-center">
                                    Panel 3
                                </div>
                            </ng-template>
                            <ng-template pTemplate>
                                <div class="col flex align-items-center justify-content-center">
                                    Panel 4
                                </div>
                            </ng-template>
                        </p-splitter>
                    </ng-template>
                </p-splitter>
            </ng-template>
        </p-splitter>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SplitterModule&#125; from 'primeng/splitter';
</app-code>

            <h5>Getting Started</h5>
            <p>Splitter requires two ng-template with <i>pTemplate</i> structural directives to wrap.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitter [style]="&#123;'height': '300px'&#125;"&gt;
    &lt;ng-template pTemplate&gt;
        Panel 1
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate&gt;
        Panel 2
    &lt;/ng-template&gt;
&lt;/p-splitter&gt;
</app-code>

            <h5>Layout</h5>
            <p>Default orientation is configured with the <i>layout</i> property and default is the "horizontal" whereas other alternative is the "vertical".</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitter [style]="&#123;'height': '300px'&#125;" layout="vertical"&gt;
    &lt;ng-template pTemplate&gt;
        Panel 1
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate&gt;
        Panel 2
    &lt;/ng-template&gt;
&lt;/p-splitter&gt;
</app-code>

            <h5>Initial Sizes</h5>
            <p>When no panelSizes are defined, panels are split 50/50, use the <i>panelSizes</i> property to give relative widths e.g. [20,80].</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitter [style]="&#123;'height': '300px'&#125;" [panelSizes]="[20,80]" layout="vertical"&gt;
    &lt;ng-template pTemplate&gt;
        Panel 1
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate&gt;
        Panel 2
    &lt;/ng-template&gt;
&lt;/p-splitter&gt;
</app-code>

            <h5>Minimum Sizes</h5>
            <p>Minimum sizes defines the lowest boundary for the size of a panels.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitter [style]="&#123;'height': '300px'&#125;" [minSizes]="[10,20]" layout="vertical"&gt;
    &lt;ng-template pTemplate&gt;
        Panel 1
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate&gt;
        Panel 2
    &lt;/ng-template&gt;
&lt;/p-splitter&gt;
</app-code>

            <h5>Nested Panels</h5>
            <p>Splitters can be combined to create advanced layouts.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitter [style]="&#123;'height': '300px'&#125;" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5"&gt;
    &lt;ng-template pTemplate&gt;
        &lt;div class="col flex align-items-center justify-content-center"&gt;
            Panel 1
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate&gt;
        &lt;p-splitter layout="vertical" [panelSizes]="[15,85]"&gt;
            &lt;ng-template pTemplate&gt;
                &lt;div class="col flex align-items-center justify-content-center"&gt;
                    Panel 2
                &lt;/div&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate&gt;
                &lt;p-splitter [panelSizes]="[20,80]"&gt;
                    &lt;ng-template pTemplate&gt;
                        &lt;div class="col flex align-items-center justify-content-center"&gt;
                            Panel 3
                        &lt;/div&gt;
                    &lt;/ng-template&gt;
                    &lt;ng-template pTemplate&gt;
                        &lt;div class="col flex align-items-center justify-content-center"&gt;
                            Panel 4
                        &lt;/div&gt;
                    &lt;/ng-template&gt;
                &lt;/p-splitter&gt;
            &lt;/ng-template&gt;
        &lt;/p-splitter&gt;
    &lt;/ng-template&gt;
&lt;/p-splitter&gt;
</app-code>

            <h5>Stateful</h5>
            <p>Splitters can be configured as stateful so that when the user visits the page again, the adjusts sizes
                can be restored. Define a <i>stateKey</i> to enable this feature. Default location of the state is
                session storage and other option is the local storage which can be configured using the <i>stateStorage</i> property.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-splitter stateKey="mykey" stateStorage="local"&gt;
    &lt;ng-template pTemplate&gt;
        Panel 1
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate&gt;
        Panel 2
    &lt;/ng-template&gt;
&lt;/p-splitter&gt;
</app-code>
            <h5>Properties</h5>
				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
				<div class="doc-tablewrapper">
					<table class="doc-table">
						<thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Default</th>
                                <th>Description</th>
                            </tr>
						</thead>
						<tbody>
                            <tr>
                                <td>panelSizes</td>
                                <td>number</td>
                                <td>null</td>
                                <td>Size of the elements relative to 100%.</td>
                            </tr>
                            <tr>
                                <td>minSizes</td>
                                <td>number</td>
                                <td>null</td>
                                <td>Minimum size of the elements relative to 100%.</td>
                            </tr>
                            <tr>
                                <td>layout</td>
                                <td>string</td>
                                <td>horizontal</td>
                                <td>Orientation of the panels, valid values are "horizontal" and "vertical".</td>
                            </tr>
                            <tr>
                                <td>gutterSize</td>
                                <td>number</td>
                                <td>4</td>
                                <td>Size of the divider in pixels.</td>
                            </tr>
							<tr>
                                <td>stateKey</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Storage identifier of a stateful Splitter.</td>
                            </tr>
							<tr>
                                <td>stateStorage</td>
                                <td>string</td>
                                <td>session</td>
                                <td>Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.</td>
                            </tr>
                            <tr>
                                <td>style</td>
                                <td>object</td>
                                <td>null</td>
                                <td>Inline style of the component.</td>
                            </tr>
                            <tr>
                                <td>styleClass</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Style class of the component.</td>
                            </tr>
                            <tr>
                                <td>panelStyleClass</td>
                                <td>string</td>
                                <td>null</td>
                                <td>Style class of the panel.</td>
                            </tr>
                            <tr>
                                <td>panelStyle</td>
                                <td>object</td>
                                <td>null</td>
                                <td>Inline style of the pnanel.</td>
                            </tr>
						</tbody>
					</table>
				</div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onResizeStart</td>
                            <td>event.originalEvent: Original event <br />
                                event.sizes: Sizes of the panels as an array </td>
                            <td>Callback to invoke when resize starts.</td>
                        </tr>
                        <tr>
                            <td>onResizeEnd</td>
                            <td>event.originalEvent: Original event <br />
                                event.sizes: Sizes of the panels as an array </td>
                            <td>Callback to invoke when resize ends.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>panel</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-splitter</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-splitter</td>
                            <td>Container element during resize.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-horizontal</td>
                            <td>Container element with horizontal layout.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-vertical</td>
                            <td>Container element with vertical layout.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-panel</td>
                            <td>Splitter panel element.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-gutter</td>
                            <td>Gutter element to use when resizing the panels.</td>
                        </tr>
                        <tr>
                            <td>p-splitter-gutter-handle</td>
                            <td>Handl element of the gutter.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/splitter" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-splitter-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Horizontal&lt;/h5&gt;
    &lt;p-splitter [style]="&#123;'height': '300px'&#125;" styleClass="mb-5"&gt;
        &lt;ng-template pTemplate&gt;
            &lt;div class="col flex align-items-center justify-content-center"&gt;
                Panel 1
            &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate&gt;
            &lt;div class="col flex align-items-center justify-content-center"&gt;
                Panel 2
            &lt;/div&gt;
        &lt;/ng-template&gt;
    &lt;/p-splitter&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Vertical&lt;/h5&gt;
    &lt;p-splitter [style]="&#123;'height': '300px'&#125;" styleClass="mb-5" layout="vertical"&gt;
        &lt;ng-template pTemplate&gt;
            &lt;div class="col flex align-items-center justify-content-center"&gt;
                Panel 1
            &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate&gt;
            &lt;div class="col flex align-items-center justify-content-center"&gt;
                Panel 2
            &lt;/div&gt;
        &lt;/ng-template&gt;
    &lt;/p-splitter&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Nested&lt;/h5&gt;
    &lt;p-splitter [style]="&#123;'height': '300px'&#125;" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5"&gt;
        &lt;ng-template pTemplate&gt;
            &lt;div class="col flex align-items-center justify-content-center"&gt;
                Panel 1
            &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate&gt;
            &lt;p-splitter layout="vertical" [panelSizes]="[15,85]"&gt;
                &lt;ng-template pTemplate&gt;
                    &lt;div style="flex-grow: 1;" class="flex align-items-center justify-content-center"&gt;
                        Panel 2
                    &lt;/div&gt;
                &lt;/ng-template&gt;
                &lt;ng-template pTemplate&gt;
                    &lt;p-splitter [panelSizes]="[20,80]"&gt;
                        &lt;ng-template pTemplate&gt;
                            &lt;div class="col flex align-items-center justify-content-center"&gt;
                                Panel 3
                            &lt;/div&gt;
                        &lt;/ng-template&gt;
                        &lt;ng-template pTemplate&gt;
                            &lt;div class="col flex align-items-center justify-content-center"&gt;
                                Panel 4
                            &lt;/div&gt;
                        &lt;/ng-template&gt;
                    &lt;/p-splitter&gt;
                &lt;/ng-template&gt;
            &lt;/p-splitter&gt;
        &lt;/ng-template&gt;
    &lt;/p-splitter&gt;
&lt;/div&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-splitter-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
